.popup {
  position: fixed; /* 固定定位，使弹出框相对于浏览器窗口定位 */
  top: 50%; /* 顶部偏移50% */
  left: 50%; /* 左侧偏移50% */
  transform: translate(-50%, -50%); /* 将弹出框的中心对齐到浏览器窗口的中心 */
  background-color: #333; /* 深灰色背景，提升优雅感 */
  border: 1px solid #444; /* 更加柔和的边框颜色 */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* 轻微阴影效果，保持层次感 */
  padding: 15px; /* 内边距稍微减少 */
  z-index: 1000; /* 确保弹出框在其他内容之上 */
  width: 270px; /* 弹出框宽度减小，整体更紧凑 */
  text-align: center; /* 文本居中对齐 */
  color: #e8e8e9; /* 白色文字，确保可读性 */
}

/* 弹出框内容的样式 */
.popup-content {
  margin: 0 auto; /* 水平居中 */
}

/* 标题的样式 */
.popup h2 {
  margin-top: 0;
  margin-bottom: 5px;
  color: #f0f0f0; /* 亮灰色标题，显得清新 */
  font-size: 18px; /* 标题字体稍微小一些 */
}

/* 鲜花图标的样式 */
.popup img {
  width: 80px; /* 缩小图标的尺寸 */
  height: 80px; /* 缩小图标的尺寸 */
  cursor: pointer;
  margin-bottom: 10px;
}

/* 鲜花数量的样式 */
.popup p {
  font-size: 14px; /* 字体大小适度减小 */
  font-weight: bolder;
  color: #b5b5b5; /* 浅灰色文字，突出但不刺眼 */
  margin: 5px 0; /* 控制文字间距 */
}

/* 按钮的样式 */
.buttonContainer{
  display: flex;
  justify-content: space-around;
  margin-top: 10px;
  margin-bottom: 10px;
  width: 100%;
  height: 40px;
  /* background-color: #fff; */
}
.popup button {
   /* 按钮内边距缩小 */
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 14px; /* 字体大小稍微减小 */
  transition: background-color 0.3s, transform 0.1s ease;
  /* line-height: 24px; */
  font-weight: bolder;
  
}

/* 取消按钮的样式 */
.popup button:first-of-type {
  background-color: #4e89ae; /* 柔和的蓝色 */
  color: #fff;
  width: 45%;
  /* margin: 10%; */

}

/* 送出按钮的样式 */
.popup button:last-of-type {
  background-color: #f5b700; /* 优雅的金色 */
  color: #fff;
  width: 45%;
  transition: transform 0.1s ease, background-color 0.1s ease;
}

/* 按钮悬停时的样式 */
.popup button:hover {
  background-color: #7fa7c9; /* 悬停时变亮的蓝色 */
}

/* 按钮点击时的动画效果 */
.popup button:active {
  transform: scale(0.95); /* 点击时稍微缩小 */
  background-color: #d18f00; /* 深金色点击效果 */
}

/* 图片的初始样式 */
.animated-image {
  width: 80px; /* 缩小图标尺寸 */
  height: 80px;
  cursor: pointer;
  transition: transform 0.3s ease;
}

/* 点击图片时的样式 */
.animated-image.clicked {
  transform: scale(1.2); /* 放大到原来的1.2倍 */
}

.inputTotal {
  border-radius: 10px;
  border: 0;
  background-color: #fff;
  height: 35px; /* 输入框稍微减小 */
  font-weight: 600;
  margin-top: 15px;
  color: #333;
  padding: 8px;
  font-size: 14px; /* 输入框字体稍微减小 */
}
